<style scoped>
  li img{
    max-width: 100px;
  }
  .button{
    margin: 0 20px;
  }
  tr:last-child td{
    border-bottom: none;
  }
</style>
<template>
  <main>
   <h4 class="title is-5">网站进度比</h4>
   <section>
     <progress-bar :type="'warning'":size="'large'" :value="10" :max="100" :show-label="true">></progress-bar>
   </section>
   <h4 class="title is-5">操作步骤</h4>
   <section>
     <progress-tracker text alignment="center">
       <step-item v-for="item in stepItems" :key="item.title" :marker="item.marker" :title="item.title"></step-item>
     </progress-tracker>
   </section>
   <h4 class="title is-5">统计数据</h4>
   <section>
    <table class="table">
      <tr><td>昨日UV</td>	<td>昨日PV</td><td>页面数</td><td>上架商品数</td><td>订单数</td></tr>
      <tr><td>0</td>	<td>0</td><td>0</td><td>0</td><td>0</td></tr>
    </table>
   </section>
   <h4 class="title is-5">数据概览</h4>
   <section class="box">
     <chart :type="'line'" :data="seriesData" :options="options_3"></chart>
   </section>
  </main>
</template>

<script>
  import { Modal } from 'vue-bulma-modal'
  import { mapGetters, mapActions } from 'vuex'
  import ProgressBar from 'vue-bulma-progress-bar'
  import ProgressTracker, { StepItem } from 'vue-bulma-progress-tracker'
  import Chart from 'vue-bulma-chartjs'
  export default {
    data () {
      return {
        labels: ['Sleeping', 'Designing', 'Coding', 'Cycling'],
        data: [20, 40, 5, 35],

        options: {
          segmentShowStroke: false
        },
        backgroundColor: [
          '#1fc8db',
          '#fce473',
          '#42afe3',
          '#ed6c63',
          '#97cd76'
        ],

        labels_2: ['April', 'May', 'June', 'Jule', 'August', 'September', 'October', 'November', 'December'],
        data_2: [1, 9, 3, 4, 5, 6, 7, 8, 2].map(e => (Math.sin(e) * 25) + 25),

        labels_3: ['May', 'June', 'Jule', 'August', 'September', 'October', 'November'],
          data_3: [
          [65, 59, 90, 81, 56, 55, 40],
          [28, 48, 40, 19, 88, 27, 45]
        ],
          options_3: {
          tooltips: {
            mode: 'label'
          }
        },
        backgroundColor_3: [
          'rgba(31, 200, 219, 1)',
          'rgba(151, 205, 118, 1)'
        ],
        series: ['Product A', 'Product B'],
        stepItems: [
          {
            title: '添加菜单'
          },
          {
            title: '添加页面'
          },
          {
            title: '选择模板'
          },
          {
            title: '编辑模板'
          },
          {
            title: '编辑页面'
          },
          {
            title: '预览'
          }
        ]
      }
    },
    methods: {
      ...mapActions([
        'toggleSidebar',
        'toggleSidebars'
      ]),

      _set () {
        this.visible = true
      },
      save () {
        let vm = this
        this.close()
        setTimeout(function(){
          vm.$router.push('tpl')
        },100)
      },
      close () {
        this.visible = false
      }
    },
    computed:  Object.assign(mapGetters({
      sidebar: 'sidebar',
      tpl: 'tpl'
    }),{
      seriesData () {
        let data = {
          labels: this.labels_3
        }
        data.datasets = this.series.map((e, i) => {
            return {
              data: this.data_3[i],
              label: this.series[i],
              borderColor: this.backgroundColor_3[i].replace(/1\)$/, '.5)'),
              pointBackgroundColor: this.backgroundColor_3[i],
              backgroundColor: this.backgroundColor_3[i].replace(/1\)$/, '.5)')
            }
          })
        return data
      }
    }),
    components: { Modal, ProgressBar, ProgressTracker, StepItem, Chart},
    mounted () {
      let vm = this
      this.$parent.status = false
    }
  }
</script>
